<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Install 安装向导</title>
    <link href="static/css/bootstrap-icons.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html {
            color: #333;
            font-size: 14px;
        }

        table th:first-child {
            width: 200px;
        }

        table th:nth-child(2) {
            width: 150px;
        }

        table th:nth-child(3) {
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="app" class="d-flex flex-column" v-cloak>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Admin 安装向导</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            </nav>
        </header>
        <main class="flex-grow-1 border-top border-bottom border-primary border-2 px-3">
            <div class="my-1 py-3" style="height:calc(100vh - 125px); overflow-y: auto;">
                <h4>服务器信息</h4>
                <div class="my-2">
                    <a href="phpi.php" target="_blank" class="btn btn-sm btn-secondary">phpinfo()</a>
                    <a href="tz.php" target="_blank" class="btn btn-sm btn-secondary ms-2">雅黑探针</a>
                    <a href="https://www.baidu.com" target="_blank" class="btn btn-sm btn-secondary ms-2">求助百度</a>
                    <a href="https://gitee.com/sochishun/tvadmin/issues" target="_blank"
                        class="btn btn-sm btn-secondary ms-2">问题反馈</a>
                </div>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr>
                            <th>项目</th>
                            <th>所需配置</th>
                            <th>推荐配置</th>
                            <th>当前服务器</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,idx) of dataOfProbe.server_info" :key="idx">
                            <td>{{item.text}}</td>
                            <td>{{item.minValue}}</td>
                            <td>{{item.recommendValue}}</td>
                            <td>{{item.value}}</td>
                            <td>{{item.comment||'--'}}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr>
                            <th>文件权限监测</th>
                            <th>所需状态</th>
                            <th>当前状态</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,idx) of dataOfProbe.env_info" :key="idx">
                            <td>{{item.text}}</td>
                            <td>可写</td>
                            <td :class="item.status ? 'text-success' : 'text-danger'">
                                {{item.status ? '可写' : '不可写'}}
                                {{item.is_exists ? '' : '(不存在)'}}
                            </td>
                            <td>{{item.comment||'--'}}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr>
                            <th>PHP扩展</th>
                            <th>建议</th>
                            <th>检查结果</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,idx) of dataOfProbe.module_info" :key="idx">
                            <td>{{item.text}}</td>
                            <td>启用</td>
                            <td :class="item.status ? 'text-success' : 'text-danger'">
                                {{item.status ? '已安装' : '未安装'}}
                            </td>
                            <td>{{item.comment||'--'}}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-sm table-striped table-hover">
                    <thead>
                        <tr>
                            <th>PHP函数</th>
                            <th>建议</th>
                            <th>检查结果</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,idx) of dataOfProbe.function_info" :key="idx">
                            <td>{{item.text}}</td>
                            <td>启用</td>
                            <td :class="item.status ? 'text-success' : 'text-danger'">
                                {{item.status ? '启用' : '禁用'}}
                            </td>
                            <td>{{item.comment||'--'}}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-secondary">说明：查看 phpinfo(); 看看 disable_functions 是否有相关函数名称，如果有就是被屏蔽了。</div>
            </div>
        </main>
        <footer class="d-flex justify-content-between my-3 px-3">
            <div class="copyright mt-2">© 2021 <a href="https://gitee.com/sochishun/tvadmin" target="_blank"
                    class="text-reset">TvAdmin</a></div>
            <div>
                <a class="btn btn-outline-secondary me-2" href="index.html">返回</a>
                <a class="btn btn-primary" href="database.html">下一步</a>
            </div>
        </footer>
    </div>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/vue.global.prod.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script>
        // 应用配置
        const App = {
            data() {
                return {
                    serverInfo: [
                        {
                            text: 'PHP版本',
                            minValue: '8.0',
                            recommendValue: '',
                            value: '',
                            comment: '',
                        }
                    ],
                    dataOfProbe:{
                        server_info:[],
                        module_info:[],
                        function_info:[],
                        env_info:[],
                    }
                }
            },
            methods: {
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                },
                async initData() {
                    const result=await axios({
                        url:'api/api.php?action=serverinfo',
                        method:'POST'
                    })
                    this.dataOfProbe = result.data.data;
                    console.log('result=',this.dataOfProbe);
                },
            },
            created() {
                this.initData();
            },
            mounted() {
                this.initView();
            }
        }
        // 创建应用实例
        const app = Vue.createApp(App)
        const vm = app.mount('#app')
    </script>
</body>

</html>